3
3
.
.
1
1
.
.
2
2
@
@
S
S
t
t
a
a
t
t
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
@State Property Wrapper is used to create Variables that have following purpose
● Change struct Property (by default struct and its Properties are immutable)
● Access View Properties (as a proxy to indirectly read and write View Properties)
● Redraw View (when their value changes)
C
C
h
h
a
a
n
n
g
g
e
e
s
s
t
t
r
r
u
u
c
c
t
t
P
P
r
r
o
o
p
p
e
e
r
r
t
t
y
y
In SwiftUI struct is immutable - once created struct Instance can never change.
This means that all the Properties of the struct can never change their values from their initial values.
By assigning @State to a struct Property you override this default behavior and allow Property to change.
This is accomplished by deleting existing struct Instance and creating new one with the new value.
Another way of looking cold be that @State simply creates a reference to a memory location.
This way struct remains constant because reference is always pointing to the same memory location.
And when you change @State variable you are only changing content of that memory location and not the reference.
A
A
c
c
c
c
e
e
s
s
s
s
V
V
i
i
e
e
w
w
P
P
r
r
o
o
p
p
e
e
r
r
t
t
i
i
e
e
s
s
In SwiftUI you can't get a reference to a View (like Text Field) and use it to access its Properties (like to read or write it).
Instead for any Property you are interested in reading or changing you need to create @State Variable.
Then use @State Variable to set that Property when initially building the View to tell SwiftUI to which Property to bind it.
After that all reading and changing is done by accessing that @State Variable and not directly View Property itself.
This binding is highlighted by the green lines in the below example.
Property and @State Variable become entangled/synched - they will update each other.
Changes made to one will be reflected in the other.
Every time a @State Variable changes, SwiftUI changes Property and refreshes View to reflect that change.
And when user changes a View, like entering text in a Text Field, SwiftUI will automatically change @State variable.
So to change that Property you actually have to change the corresponding @State Variable.
SwiftUI will detect the change and update corresponding Property.
SwiftUI will also automatically refresh the View to take into account new Property Value.
And to read that Property you actually need to read the corresponding @State Variable.
If this was a Text Field and user entered some Value, SwiftUI will automatically copy that value into @State Variable.
R
R
e
e
d
d
r
r
a
a
w
w
V
V
i
i
e
e
w
w
Additional purpose of State Variables is to synchronize data with presentation/View.
So that every time a Variable that influences the View changes, View gets redrawn.
Such Variable can present some data value (person name) or it can influence how Views are displayed (color, position).
In any case if such Variable changes, and View isn't redrawn, User will be presented with out dated information.
To avoid to have to explicitly call some method that redraws View, every time View related Variable changes, SwiftUI uses
State Variables. Whenever value of such State Variable changes, View is automatically redrawn. This way we can't
accidently forget to redraw the View when value of View related Variable changes.
In other words we only have to pay attention when we define State Variables (which variable influences the View).
But after that we don't need to pay attention every time we change such variable not to forget to redraw the View.
SwiftUI will do that for us every time State Variable is changed.
E
E
x
x
a
a
m
m
p
p
l
l
e
e
w
w
i
i
t
t
h
h
v
v
a
a
r
r
i
i
a
a
b
b
l
l
e
e
In this example we use single @State variable name as a Property for Text View.
When the Button is pressed we change then name which automatically redraws body with the new value.
ContentView.swift
import SwiftUI
//==========================================================================
// ContentView
//==========================================================================
struct ContentView: View {
@State var name = "John"
var body: some View {
VStack {
Text(name)
Button("Button") { self.name = "Bill" }
}
}
}
Initial Screen After changing name
E
E
x
x
a
a
m
m
p
p
l
l
e
e
w
w
i
i
t
t
h
h
s
s
t
t
r
r
u
u
c
c
t
t
In this example instead of having multiple @State variables, we create a struct with all needed variables.
Then we just declare instance of this struct as a @State variable.
ContentView.swift
import SwiftUI
//==========================================================================
// Person
//==========================================================================
struct Person {
var frstName = "John"
var lastName = "Carpenter"
}
//==========================================================================
// ContentView
//==========================================================================
struct ContentView: View {
@State var person = Person()
var body: some View {
VStack {
Text(person.frstName)
Text(person.lastName)
Button("Button") { self.person.frstName = "Bill" }
}
}
}
Initial Screen After changing firstName
